<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

<div id="particles-js">
    <div class="login">
        <div class="login-top" >
            欢迎注册
        </div>
        <form action="/doRegister" id="user" onsubmit="return check()">
            <input type="hidden" name="_csrf" th:value="${_csrf.token}">
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="img/name.png"/></div>
                <label style="color: red" th:text="${msg}"></label>
                <div class="login-center-input">
                    <input type="text" name="username" value="" placeholder="请输入您的帐号" id="username" maxlength="12" onfocus="this.placeholder=''" />
                    <div class="login-center-input-text">账号</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="img/password.png"/></div>
                <div class="login-center-input">
                    <input type="password" name="password" value="" placeholder="请输入您的密码" id="password" maxlength="20" onfocus="this.placeholder=''" />
                    <div class="login-center-input-text">密码</div>
                </div>
            </div>
            <div align="center" >
                <label >学生</label>
                <input  name="type" value="学生" type="radio" checked>
                <label >教师</label>
                <input name="type" value="教师" type="radio">
            </div>
            <br><br>
            <div align="center">
                <button id="btn" style="width: 250px;text-align: center;height: 40px;line-height: 35px;background-color: dodgerblue;border-radius: 10px;color: white; ">
                    注册</button>
            </div>
        </form>
    </div>
    <div class="sk-rotating-plane"></div>
</div>



<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false;
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function check(){
        var username = $("#username").val();
        var password = $('#password').val();

        if(username == "" && password == ""){
            alert("账号和密码不能为空");
            return false;
        }
        if(username == null || username == ""){
            alert("账号不能为空");
            return false;
        }
        if(password == null || password == ""){
            alert("密码不能为空");
            return false;
        }
        return true;
    }

</script>

</body>
</html>